<template>
  <div class="homeHeader">
    <div class="headerTopBack">
      <div class="headerTopMain">
        <div class="headerTopLeft">
          <p>欢迎来到 {{described}}</p>
        </div>
        <div class="headerTopRight">
          <ul class="headerTopUl" v-if="headerLoginStatus && headerPersonal">
            <li><img src="http://ou1gyd361.bkt.clouddn.com/level_pic/o_1c508u9ljmtehdr1jim1dgr1t94a.png" alt="" class="classDiagram"></li>
            <li>{{headerPersonal.memberInfo.username}} 您好</li>
            <li><router-link :to="{name: 'myLottery', query: {id: 0}}">个人中心</router-link></li>
            <li>|</li>
            <li @click="signOut"><a href="javascript:void(0)">退出</a></li>
            <li>账户余额：<span>￥{{headerPersonal.memberInfo.amount}}</span></li>
            <li><img :src="headerRefresh" alt="" class="headerRefresh" @click="theUserInForm"></li>
          </ul>
          <nav class="loginAndRegister" v-if="!headerLoginStatus">
            <li v-for="login in loginAndRegister">
              <router-link :to="{name: login.url, query: {stateId: login.id}}">
                <p>{{login.name}}</p>
              </router-link>
            </li>
          </nav>
          <nav class="loginAndRegister" v-if="headerLoginStatus">
            <li v-for="money in moneyAndAmount">
              <router-link :to="{name: money.url, query: {id: money.id}}">
                <p>{{money.name}}</p>
              </router-link>
            </li>
          </nav>
          <nav class="mobilePurchase">
            <li v-for="(mobile,v) in mobilePurchase" @click="mobileOfThe(v, mobile.href)">
              <a href="javascript:void(0)">
                <p>{{mobile.name}}</p>
              </a>
            </li>
          </nav>
        </div>
      </div>
    </div>
    <nav class="HeaderRedNav">
      <div class="headerTopMain displayFlex">
        <div class="headerNavLeft">
          <router-link :to="{name: 'index'}"><img :src="headerLogo"/></router-link>
        </div>
        <div class="headerNavRight">
          <ul>
            <li v-for="(navList,i) in headerNavList" :class="{'colorAll': i === 1, 'on': i === navId}" @click="navigationClick(i)" v-on:mouseenter="calculationMouseenter(i)" v-on:mouseleave="calculationMouseleave(i)">
              <a href="javascript:void(0)">
                <p>{{navList.name}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="headerTriangle" :class="{'headerOpacity': lotAllTrue}"></div>
    <div class="blankBackGround" v-if="lotAllTrue" v-on:mouseenter="calculationMouseenter(1)" v-on:mouseleave="calculationMouseleave(1)">
      <div class="headerTopMain">
        <div class="navigationDiv">
          <article class="navArticle displayFlex" v-if="lotAllData.credit.list">
            <section>{{lotAllData.credit.name}}</section>
            <section>
              <p v-for="list in lotAllData.credit.list">
                <router-link :to="{name: _Util.lotteryNameUtils(list.code).name, query: {code: list.code, index: parseInt(list.code), lotteryTrue: true}}">{{list.name}}</router-link>
              </p>
            </section>
          </article>
          <article class="navArticle displayFlex" v-if="lotAllData.official.list">
            <section>{{lotAllData.official.name}}</section>
            <section>
              <p v-for="list in lotAllData.official.list">
                <router-link :to="{name: _Util.lotteryNameUtils(list.code).name, query: {code: list.code, index: parseInt(list.code), lotteryTrue: true}}">{{list.name}}</router-link>
              </p>
            </section>
          </article>
        </div>
      </div>
    </div>
  </div>
</template>

  <script>
    import './idex.scss';
    import {mapState} from 'vuex';
    export default {
      data() {
        return {
          described: 'X',
          loginAndRegister: [
            {
              id: 1,
              name: '登录',
              url: 'login'
            },
            {
              id: 2,
              name: '注册',
              url: 'register'
            }
          ],
          moneyAndAmount: [
            {
              id: 7,
              name: '充值',
              url: 'topUp'
            },
            {
              id: 8,
              name: '提现',
              url: 'withdrawal'
            }
          ],
          mobilePurchase: [
            {
              name: '手机购彩',
              href: 'mobileLottery'
            },
            {
              name: '人工客服',
              href: 'javascript:void'
            }
          ],
          headerLogo: require('../../assets/images/header/logo_setting.png'),
          headerNavList: [
            {
              name: '首页',
              href: 'index',
              id: '2'
            },
            {
              name: '购彩大厅',
              href: 'theColor',
              id: '0'
            },
            {
              name: '游戏记录',
              href: 'bettingRecord',
              id: '1'
            },
            {
              name: '系统公告',
              href: 'systemOf',
              id: '-100'
            },
            {
              name: '优惠活动',
              href: 'activity',
              id: '-100'
            },
            {
              name: '代理中心',
              href: '',
              id: '-100'
            },
            {
              name: '帮助中心',
              href: 'help',
              id: '-100'
            }
          ],
          navId: 0,
          headerRefresh: require('../../assets/images/header/Refresh.png'),
          headerPersonal: '',
          headerLoginStatus: false, //登录状态
          lotteryAllData: [], //彩种数据
          lotAllTrue: false,
          lotAllData: {
            credit: {
              name: '信用数据',
              list: []
            },
            official: {
              name: '官方数据',
              list: []
            }
          },//信用 官方数据
        }
      },
      activated() {
        let that = this;
        that.whetherTheLogin();
        that.currentRouting();
      },
      computed: {
        ...mapState({
          loginStatus: state => state.mutations.loginStatus, //登录状态
          homeStateData: state => state.mutations.homeStateData, //数据
        })
      },
      mounted() {
        let that = this;
        setTimeout(function() {
          that.calculationOf();
        },500);
      },
      methods: {
        currentRouting() {
          let name = this.$route.name;
          switch (name) {
            case 'index':
              this.navId = 0;
              break;
            case 'theColor':
              this.navId = 1;
              break;
            case 'bettingRecord':
              this.navId = 2;
              break;
            case 'systemOf':
              this.navId = 3;
              break;
            case 'systemDetails':
              this.navId = 3;
              break;
            case 'activity':
              this.navId = 4;
              break;
            case 'activityDetail':
              this.navId = 4;
              break;
            case 'help':
              this.navId = 6;
              break;
            default:
              this.navId = -1;
              break;
          }
        },
        init() {
          let that = this;
          that.lotAllData.official.list = [];
          that.lotAllData.credit.list = [];
          that._Util.post(that, that._Api.POST_LOTTERY_ALL_DATA, {}, (data)=>{
            let dataPost = data,
                len = dataPost.length;
            for(let i = 0; i < len; i++) {
              if(parseInt(dataPost[i].type) === 1) {
                that.lotAllData.official.list.push(dataPost[i]);
              }else {
                that.lotAllData.credit.list.push(dataPost[i]);
              }
            }
          });
          that.calculationOf();
        },
        whetherTheLogin() {
          let that = this;
          if(that._Util.getItem('loginStatus')) {
            that.$store.state.mutations.loginStatus = true;
          }else {
            that.$store.state.mutations.loginStatus = false;
          }
          that.headerLoginStatus = that.loginStatus;
          if(that.headerLoginStatus) {
            that.theUserInForm();
          }
        },
        calculationOf() {
          let colorAll = document.getElementsByClassName('colorAll')[0];
          let colorGet = colorAll.getBoundingClientRect();
          $('.headerTriangle').css({
            'margin-left': (colorGet.left + 40) + 'px'
          });
        },
        calculationMouseenter(index) {
          this.calculationOf();
          if(index !== 1) return;
          this.lotAllTrue = true;
        },
        calculationMouseleave(index) {
          if(index !== 1) return;
          this.lotAllTrue = false;
        },
        signOut() {
          let that = this;
          that._Util.post(that, that._Api.POST_USER_LOGOUT, {}, (data)=> {
            that._Util.showAlert('退出成功');
            that.signOutInit();
          });
        },
        signOutInit() {
          let that = this;
          that.$store.state.mutations.loginStatus = false;
          that._Util.setItem('loginStatus', false);
        },
        navigationClick(index) {
          let that = this;
          if(!that._Util.whetherLogin() && (index === 1 || index === 2)) {
            that.$router.push({name: 'login'});
            return;
          };
          that.navId = index;
          that.$router.push({name: that.headerNavList[index].href, query: {id: that.headerNavList[index].id}})
        },
        mobileOfThe(index, name) {
          if(index === 0) {
            this.$router.push({name: name});
          }
          if(index === 1){
            window.open(this._Api.customerLink);
          }
        },
        //获取用户信息
        theUserInForm() {
          let that = this;
          //
          that._Util.post(that, that._Api.POST_USER_MESSAGE, {}, (data)=>{
            that.headerPersonal = data;
            that.$store.commit('POST_USER_INFORMATION', that.headerPersonal);
          });
        },
      },
      watch: {
        'loginStatus'() {
          this.whetherTheLogin();
        },
        'homeStateData'() {
           this.init();
        }
      }
    }
</script>
